import { useInjectMap } from './hooks/use-inject-map'
import Image from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'

export default defineComponent({
  name: 'ImageStatic',
  props: {
    data: Object
  },
  setup(props) {
    const { map } = useInjectMap()
    const layer = shallowRef()

    const addLayer = () => {
      const source = new ImageStatic({
        url: '',
        imageExtent: [],
        projection: 'EPSG:4326',
        crossOrigin: '',
        interpolate: true
      })

      layer.value = new Image({
        source: source
      })
      map?.addLayer(layer.value)
      if (props.data) {
        nextTick(() => {
          draw(props.data)
        })
      }
    }
    addLayer()

    const draw = (sourceData) => {
      // projection: this.projection,
      // imageExtent: this.extent,
      // imageSize: [imageWidth, imageHeight],
      // url: imageURL,
      // const source = new ImageStatic({
      //   projection: 'EPSG:4326',
      //   crossOrigin: '',
      //   interpolate: true,
      //   ...sourceData
      // })
      // // 设置属性
      // layer.value.setSource(source)
      const source = layer.value?.getSource()
      source.setProperties({
        projection: 'EPSG:4326',
        crossOrigin: '',
        interpolate: true,
        ...sourceData
      })
    }

    const clear = () => {
      const source = layer.value?.getSource()
      source.setProperties({
        url: ''
      })
    }

    watch(
      () => props.data,
      (newwale) => {
        clear()
        newwale && draw(newwale)
      },
      { immediate: true }
    )

    onBeforeUnmount(() => {
      map?.removeLayer(layer.value)
    })
    return {}
  },

  render() {
    return null
  }
})
